<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Insert title here</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/bootstrap-4.5.0-dist/css/bootstrap.css">
<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
 img {
	max-width:300px;
}

</style>
</head>
<body>
	<div class="container">
		<form action="/admin/articles" method="post">	
			文章审核状态:
			<input type="radio" name="status" value="0" ${article.status==0?'checked':'' }>待审
			<input type="radio" name="status" value="1" ${article.status==1?'checked':'' }>已审
			<input type="radio" name="status" value="-1" ${article.status==-1?'checked':'' }>驳回
			<input type="radio" name="status" value="2" ${article.status==null || article.status==2?'checked':'' }>全部
			<input type="button" onclick="query()" value="查询">
		</form>	
			<table class="table">
				<tr>
					<td>序号</td>
					<td>文章标题</td>
					<td>作者</td>
					<td>发布时间</td>
					<td>所属栏目</td>
					<td>所属分类</td>
					<td>热门</td>
					<td>状态</td>
					<td>操作</td>
				</tr>
			
			
				<c:forEach items="${info.list}" var="article">
					<tr>
						<td>${article.id}</td>
						<td>${article.title}</td>
						<td>${article.userName}</td>
						<td>
							<fmt:formatDate value="${article.created}" pattern="yyyy-MM-dd"/>
						</td>
						<td>${article.channelName}</td>
						<td>${article.categoryName}</td>
						<td>
							<c:if test="${article.hot==0}">
								<input type="button" class="btn btn-success" value="否" onclick="updateHot(${article.id},this)">
							
							</c:if> 
							<c:if test="${article.hot==1}">
								<input type="button" class="btn btn-danger" value="是" onclick="updateHot(${article.id},this)">
							
							</c:if>
						</td>
						<td>${article.status==1?"已审核":article.status==0?"未审核":"审核未通过"}</td>
						<td>
							<button type="button" onclick="detail(${article.id})" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >详情</button>
						</td>
					</tr>
				</c:forEach>
			</table>
		<!-- 加载分页页面 -->
		<jsp:include page="/WEB-INF/view/commons/pages.jsp"></jsp:include>		
	</div>	
	
	<!-- 文章详情的模态框 -->
	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h5 class="modal-title" id="exampleModalLabel"></h5>
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	          <span aria-hidden="true">&times;</span>
	        </button>
	      </div>
	      <div class="modal-body" id="content">
	       		
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="update(1)">同意</button>
	        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update(-1)">驳回</button>
	        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>		
</body>
<script type="text/javascript">
	var articleId="";

	//查询文章详情
	function detail(id){
		//将id符全局变量
		articleId=id;
		
		$.post("/my/detail",{id:id},function(article){
			//展示数据
			$("#exampleModalLabel").html(article.title);
			$("#content").html(article.content);
			//设置文章id
			$("#articleId").val(id);					
		})
	}
	//分页
	function goPage(pageNum){		
		
		//获取form表单中的数据				
		//location="/admin/articles?pageNum="+pageNum+"&"+$("form").serialize();
		//整合管理员中心以后
		$("#center").load("/admin/articles?pageNum="+pageNum+"&"+$("form").serialize());
		
	}
	//查询文章
	function query(){
		$("#center").load("/admin/articles?"+$("form").serialize());
	}
	//修改
	function update(status){
		
		//使用ajax意不修改状态
		$.post("/admin/update",{status:status,id:articleId},function(result){
			if(result){
				//修改成功
				//location="/admin/articles";
				$("#center").load("/admin/articles");
				window.location.reload();
			}else{
				alert("审核失败");
			}
		})
		
	}
	//修改个人状态
	function updateHot(id,obj){
		
		//获取按钮显示的文字
		var hot=$(obj).val()=="是"?0:1;
		//使用ajax修改
		$.post("/admin/update",{id:id,hot:hot},function(result){
			if(result){
				//修改按钮样式文字
				if($(obj).val()=="是"){
					$(obj).val("否");
					$(obj).removeClass("btn-danger");
					$(obj).addClass("btn-success");	
											
				}else{
					$(obj).val("是");
					$(obj).removeClass("btn-success");
					$(obj).addClass("btn-danger");				
				}
				
				
				location="/admin/articles";
				
			}else{
				alert("修改失败");
			}
		})
		
	}
	
	
</script>
</html>